<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<script type="text/javascript">
	var tempPid;
	var template01=
		"<div id='response_message'><article class='new-msg'><div class='cancel-msg'><button onclick='cancel()' class='btn btn-primary' type='button'>取消回复</button></div><form action='msg?action=save' method='post' id='msg_form' > "
				+"<input value='${replytype}' name='type' id='type' type='hidden'><input value=";
	var template02=	" name='articleId' id='articleId' type='hidden'> <input value= ";
	var template03 =" name='pid' id='pid' type='hidden'> <p>"
				+"<input value='${currentUser.nickname}' placeholder='姓名'"
				+"<c:if test='${not empty currentUser}'>type='hidden'</c:if>"
				+"name='nickname' id='nickname' type='text' require><p>"
				+"<input value='${currentUser.email}' placeholder='邮箱' <c:if test='${not empty currentUser}'>type='hidden'</c:if> name='email' id='email' type='email' require></p><p>"
				+"<input value='${currentUser.website}' placeholder='http:// ' <c:if test='${not empty currentUser}'>type='hidden'</c:if> name='website'"
				+"	require  type='url'></p><textarea name='content' rows='4' placeholder='大雁从天空飞过，怎能不留下痕迹？'"
					+"  ></textarea><div class='clearfix'>"
					+"	<span style='color: #777777;'>您也可以通过姓名和邮箱</span><a"
					+"	style='cursor: pointer; color: #5895BE;' href='login.jsp'>登录</a><span"
					+" style='color: #777777;'>，快速发布评论</span> <input type='submit'"
					+" id='msg_submit' value='发布评论' />"
					+" </div><div align='center' class='error'>${error}</div></form></article></div>"
	function reply(type,pid,articleId) {
		tempPid = pid;
		document.getElementById("reply"+pid).innerHTML =template01+articleId+template02+pid+template03;
	}
	function cancel() {
		 document.getElementById("reply"+tempPid).innerHTML = "";
	}
</script>

<article class="msgs-list">
	<ol class="msg-list">
		<c:forEach var="msg" items="${msgs}">
			<li class="msg-body msg-parent msg-odd">
				<div class="msg-author">
					<span><img src="image/user/${msg.user.imageName}"
						class="avatar" width="32" height="32"></span> <cite itemprop="name"
						class="fn"> <a rel="external nofollow"
						href="${msg.user.website}">${msg.user.nickname}</a>
					</cite>
				</div>
				<div class="msg-meta">
					『
					<fmt:formatDate value="${msg.pubDate }" type="date"
						pattern="yyyy-MM-dd HH-mm-ss" />
					』
				</div>
				<div itemprop="msgText" class="msg-content">
					<p>${msg.content}</p>
				</div>
				<div class="msg-reply">
					<a onclick="reply(${replytype},${msg.id},${articleId})"
						style="cursor: hand; cursor: pointer;">回复</a>
				</div>

				<div class="msg-children" itemprop="discusses">
					<ol class="msg-list">
						<c:forEach var="child" items="${msg.chirdren}">
							<li
								class="msg-body msg-child msg-level-odd msg-odd msg-by-author">
								<div class="msg-author">
									<span><img src="image/user/${child.user.imageName}"
										class="avatar" width="32" height="32"></span> <cite
										itemprop="name" class="fn"> <a rel="external nofollow"
										href="${child.user.website}">${child.user.nickname}</a>
									</cite>
								</div>
								<div class="msg-meta">
									『
									<fmt:formatDate value="${child.pubDate }" type="date"
										pattern="yyyy-MM-dd HH-mm-ss" />
									』
								</div>
								<div itemprop="msgText" class="msg-content">
									<p>${child.content }</p>
								</div>
								<div class="msg-reply">
									<a onclick="reply(${replytype},${msg.id},${articleId})"
										style="cursor: hand; cursor: pointer;">回复</a>
								</div>
							</li>
						</c:forEach>
					</ol>
				</div>
			</li>
			<div id="reply${msg.id}"></div>
		</c:forEach>
	</ol>
</article>
